{{define "body"}}

<div class="col-md-12">
    <div class="alert alert-danger">今天还没有上传的图片哟~~ <br/>快来上传第一张吧~!</div>

    <ul id="viewjs">
        <div class="cards listNum">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="card">
                    <li><img src="/static/images/loading.svg"
                             data-image="/easyimages/app/thumb.php?img=/i/2024/03/23/10hh4k9.jpg"
                             data-original="/easyimages/i/2024/03/23/10hh4k9.jpg" alt="简单图床-EasyImage"></li>
                    <div class="bottom-bar">
                        <a href="/i/2024/03/23/10hh4k9.jpg" target="_blank"><i class="icon icon-picture"
                                                                               data-toggle="tooltip" title="打开"
                                                                               style="margin-left:10px;"></i></a>
                        <a href="#" class="copy" data-clipboard-text="/i/2024/03/23/10hh4k9.jpg" data-toggle="tooltip"
                           title="复制链接" style="margin-left:10px;"><i class="icon icon-copy"></i></a>
                        <a href="../app/info.php?img=/i/2024/03/23/10hh4k9.jpg" data-toggle="tooltip" title="详细信息"
                           target="_blank" style="margin-left:10px;"><i class="icon icon-info-sign"></i></a>
                        <a href="../app/down.php?dw=/i/2024/03/23/10hh4k9.jpg" data-toggle="tooltip" title="下载文件"
                           target="_blank" style="margin-left:10px;"><i class="icon icon-cloud-download"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </ul>

</div>
<div class="col-md-12" style="margin-bottom: 5em;">
    <hr/>
    <div class="col-md-8 col-xs-12" style="padding-bottom:5px">
        <div class="btn-toolbar">
            <div class="btn-group">
                <a class="btn btn-danger btn-mini" href="?date=2024%2F03%2F23%2F&num=0">当前0</a>
                <a class="btn btn-primary btn-mini" href="list.php">今日0</a>
                <a class="btn btn-mini" href="?date=2024/03/22/">昨日0</a>
                <a class="btn btn-mini hidden-xs inline-block" href="?date=2024/03/21/">21号</a><a
                    class="btn btn-mini hidden-xs inline-block" href="?date=2024/03/20/">20号</a><a
                    class="btn btn-mini hidden-xs inline-block" href="?date=2024/03/19/">19号</a><a
                    class="btn btn-mini hidden-xs inline-block" href="?date=2024/03/18/">18号</a></div>
        </div>
    </div>
    <!-- 按格式 -->
    <!-- <div class="row">
      <div class="col-md-2 col-xs-6">
        <form action="<php echo '?' . http_build_query($httpUrl) . '&'; ?>" method="get">
          <div class="input-group">
            <select name="search" class="form-control input-sm">
              <option value="jpg">JPG</option>
              <option value="png">PNG</option>
              <option value="gif">Gif</option>
              <option value="webp">WEBP</option>
            </select>
            <span class="input-group-btn">
              <input type="submit" value="按格式" class="btn btn-primary input-sm" />
            </span>
          </div>
        </form>
      </div> -->
    <div class="col-md-2 col-xs-7">
        <div class="btn-group">
            <a class="btn btn-mini" href="?date=2024%2F03%2F23%2F&num=0&search=jpg">JPG</a>
            <a class="btn btn-mini" href="?date=2024%2F03%2F23%2F&num=0&search=png">PNG</a>
            <a class="btn btn-mini" href="?date=2024%2F03%2F23%2F&num=0&search=gif">GIF</a>
            <a class="btn btn-mini" href="?date=2024%2F03%2F23%2F&num=0&search=webp">Webp</a>
        </div>
    </div>
    <!-- 按日期-->
    <div class="col-md-2 col-xs-5">
        <form action="/list" method="get">
            <div class="input-group">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control form-date input-sm" name="date" value="2024/03/23/"
                       readonly="readonly">
                <span class="input-group-btn">
            <button type="submit" class="btn btn-primary input-sm">按日期</button>
          </span>
            </div>
        </form>
        <!-- 返回顶部-->
        <div class="btn btn-mini btn-primary btn-back-to-top"><i class="icon icon-arrow-up"></i></div>
    </div>
</div>

<link rel="stylesheet" href="/static/index.css">
<link rel="stylesheet" href="/static/viewjs/viewer.min.css">
<link rel="stylesheet" href="/static/zui/lib/datetimepicker/datetimepicker.min.css">
<link rel="stylesheet" href="/static/zui/lib/bootbox/bootbox.min.css">
<style>
    /* 返回顶部 */
    .btn-back-to-top {
        padding: 0.5rem 1rem;
        position: fixed;
        right: 2rem;
        bottom: 1rem;
        z-index: 2;
        -webkit-transition: -webkit-transform 0.2s ease;
        transition: transform 0.2s ease;
        -webkit-transform: translateY(200%);
        transform: translateY(200%);
    }

    .btn-back-to-top.scrolled {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
</style>
<script type="application/javascript" src="/static/zui/lib/bootbox/bootbox.min.js"></script>
<script type="application/javascript" src="/static/lazyload/lazyload.min.js"></script>
<script type="application/javascript" src="/static/viewjs/viewer.min.js"></script>
<script type="application/javascript" src="/static/zui/lib/clipboard/clipboard.min.js"></script>
<script type="application/javascript" src="/static/zui/lib/datetimepicker/datetimepicker.min.js"></script>
<script>
    // viewjs
    new Viewer(document.getElementById('viewjs'), {
        url: 'data-original',
    });

    // 复制url
    var clipboard = new Clipboard('.copy');
    clipboard.on('success', function (e) {
        new $.zui.Messager("复制直链成功", {
            type: "success", // 定义颜色主题
            icon: "ok-sign" // 定义消息图标
        }).show();

    });
    clipboard.on('error', function (e) {
        document.querySelector('.copy');
        new $.zui.Messager("复制失败", {
            type: "danger", // 定义颜色主题
            icon: "exclamation-sign" // 定义消息图标
        }).show();
    });

    // 取消/全选文件
    function opcheckboxed(objName, type) {
        var objNameList = document.getElementsByName(objName);
        if (null != objNameList) {
            for (var i = 0; i < objNameList.length; i++) {
                if (objNameList[i].checked == true) {
                    if (type != 'checkall') { // 非全选
                        objNameList[i].checked = false;
                    }
                } else {
                    if (type != 'uncheckall') { // 非取消全选
                        objNameList[i].checked = true;
                    }
                }
            }
        }
    }

    // 回收图片
    function recycle_img() {
        bootbox.confirm({
            message: "确认要放入回收站? <br /> 可在可疑图片中恢复!",
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if (result == true) {
                    obj = document.getElementsByName("checkbox");
                    check_val = [];
                    for (k in obj) {
                        //判断复选框是否被选中
                        if (obj[k].checked)
                            //获取被选中的复选框的值
                            check_val.push(obj[k].value);
                    }
                    $.post("./post_del.php", {
                        'recycle_url_array': check_val
                    },);
                    new $.zui.Messager("放入回收站成功", {
                        type: "success", // 定义颜色主题
                        icon: "ok-sign" // 定义消息图标
                    }).show();
                    // 延时2秒刷新
                    window.setTimeout(function () {
                        window.location.reload();
                    }, 1500)
                } else {
                    new $.zui.Messager("取消回收", {
                        type: "primary", // 定义颜色主题
                        icon: "info-sign" // 定义消息图标
                    }).show();
                }
            }
        });

    }

    // 删除图片
    function delete_img() {
        bootbox.confirm({
            message: "确认要删除?<br />* 删除文件夹后将无法恢复!",
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if (result == true) {
                    obj = document.getElementsByName("checkbox");
                    check_val = [];
                    for (k in obj) {
                        //判断复选框是否被选中
                        if (obj[k].checked)
                            //获取被选中的复选框的值
                            check_val.push(obj[k].value);
                        console.log(check_val);
                    }
                    $.post("./post_del.php", {
                            'del_url_array': check_val
                        },
                        function (data) {
                            if (data.search('success') > 0) {
                                new $.zui.Messager("删除成功", {
                                    type: "success", // 定义颜色主题
                                    icon: "ok-sign" // 定义消息图标
                                }).show();
                                // 延时2秒刷新
                                window.setTimeout(function () {
                                    window.location.reload();
                                }, 1500)
                            } else {
                                new $.zui.Messager("删除失败 请登录后再删除!", {
                                    type: "danger", // 定义颜色主题
                                    icon: "exclamation-sign" // 定义消息图标
                                }).show();
                                // 延时2s跳转
                                window.setTimeout("window.location=\'/../admin/index.php \'", 2000);
                            }
                        });
                } else {
                    new $.zui.Messager("取消删除", {
                        type: "primary", // 定义颜色主题
                        icon: "info-sign" // 定义消息图标
                    }).show();
                }
                console.log('是否删除图片: ' + result);
            }
        });
    }

    // 返回顶部
    var back_to_top_button = jQuery('.btn-back-to-top');
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100 && !back_to_top_button.hasClass('scrolled')) {
            back_to_top_button.addClass('scrolled');

        } else if (jQuery(this).scrollTop() < 100 && back_to_top_button.hasClass('scrolled')) {
            back_to_top_button.removeClass('scrolled');

        }
    });
    // 返回顶部
    back_to_top_button.click(function () {
        jQuery('html, body').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

    //懒加载
    var lazy = new Lazy({
        onload: function (elem) {
            console.log(elem)
        },
        delay: 300,
    })

    // 按日期浏览
    $(".form-date").datetimepicker({
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        pickerPosition: "top-right",
        format: "yyyy/mm/dd/",
        endDate: new Date() // 只能选当前日期之前
    });

    // 更改网页标题
    document.title = "图床广场 - 今日上传0张 昨日0张 - 简单图床"
</script>

{{end}}